<head>
    <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            align-content: space-around;
            flex-wrap: wrap;
        }

        .child-echarts {
            width: 300px;
            height: 300px;
            /* background-color: red; */
        }
    </style>
</head>

<body>
    <form id="myForm">
        <input type="file" id="csvFile" accept=".csv" />
        <input type="submit" value="Submit" />
    </form>

    <div class="chart-container" id="chart-root-container"></div>

    <div id="fengexian" style="display: none;margin: 0 auto; width: 1000px;text-align: center;">
        -----------------------------------------------------------------------</div>
    <div class="chart-container" id="chart-root-container-top10"></div>

    <script>
        const myForm = document.getElementById("myForm");
        const csvFile = document.getElementById("csvFile");

        function csvToArray(str, delimiter = ",") {
            const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
            const rows = str.slice(str.indexOf("\n") + 1).split("\n")
            const arr = rows.map(function (row) {
                const values = row.split(delimiter);
                if (values.length !== 1) {
                    const el = headers.reduce(function (object, header, index) {
                        if (values !== 'undefined') {
                            object[header] = values[index].replace('\r', '');
                            return object;
                        }
                    }, {});
                    if (el) {
                        return el;
                    }
                }

            });
            return arr.filter(item => item ?? item)
        }


        /**
         * @description: 统计出现次数
         * @return {*}
         */

        const countedNames = (names, e) => {
            let top10 = names.reduce((obj, name) => {
                if (name in obj) {
                    obj[name]++
                } else {
                    obj[name] = 1
                }
                return obj
            }, {})
            if (!e) {
                return top10
            }

            let top = {}
            for (const key in top10) {

                if (top10[key] > e) {
                    top[key] = top10[key]
                }
            }
            return top
        }

        // /**
        //  * @description: 数据前10的分布
        //  * @return {*}
        //  */
        // const countedNames10 = (names) => {
        //     let top10 = names.reduce((obj, name) => {
        //         if (name in obj) {
        //             obj[name]++
        //         } else {
        //             obj[name] = 1
        //         }
        //         return obj
        //     }, {})

        //     let top = {}
        //     for (const key in top10) {
        //         if (top10[key] > 10) {
        //             top[key + '_10'] = top10[key]
        //         }
        //     }
        //     return top
        // }


        /**
         * @description: 获取前5个数字
         * @return {*}
         */

        const topFiveNum = (arr) => {
            arr = arr.sort(function (a, b) { return a - b; });
            arr = arr.slice(Math.max(arr.length - 10, 0))
            return arr
        }


        /**
         * @description: 数据每列处理
         * @return {*}
         */

        const colum = (data) => {
            let obj = {}
            data.forEach((item, index) => {
                Object.values(item).forEach((element, _index) => {
                    if (!(obj['arr' + _index])) {
                        obj['arr' + _index] = []
                    }
                    obj['arr' + _index].push(element)
                });
            })
            return obj
        }


        /**
         * @description: 图表dom展示
         * @return {*}
         */

        const echartsShow = (columData, dom, e) => {
            let domTo = document.getElementById(dom)
            for (const key in columData) {
                let arr = countedNames(columData[key], e)
                debugger
                let x = Object.keys(arr)
                let y = Object.values(arr)
                var oDiv = document.createElement('div');
                oDiv.className = 'child-echarts';
                oDiv.id = e ? key + '_' + e : key;
                domTo.append(oDiv)
                echartsTo(e ? oDiv.id : key, x, y)
            }
        }

        /**
         * @description: line图表
         * @return {*}
         */
        const echartsTo = (domId, x, y) => {
            var dom = document.getElementById(domId);
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};

            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: x || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: y || [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };


            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }


        myForm.addEventListener("submit", function (e) {

            e.preventDefault();
            const input = csvFile.files[0];
            const reader = new FileReader();
            reader.onload = function (e) {
                const text = e.target.result;
                const data = csvToArray(text);

                const columData = colum(data)
                document.getElementById('fengexian').style.display = 'block'


                echartsShow(columData, 'chart-root-container', null)
                echartsShow(columData, 'chart-root-container-top10', 5)

                console.log(columData)
                for (const key in columData) {
                    let arr = countedNames(columData[key], 5)
                    let y = Object.values(arr)
                    console.log(topFiveNum(y))
                }


            };

            reader.readAsText(input);
        });



    </script>
</body>